import { Table } from 'antd';
import React from 'react';

const App: React.FC = () => {
    const list = [
        {
            key: '1',
            month: '2024年10月',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
            COB5: 32,
            COB6: 32,
            COB7: 32,
            COB8: 32,
            COB9: 32,
            COB10: 32,
            COB11: 32,
            COB12: 32,
        },
        {
            key: '2',
            month: '2024年2月',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
            COB5: 32,
            COB6: 32,
            COB7: 32,
            COB8: 32,
            COB9: 32,
            COB10: 32,
            COB11: 32,
        },
        {
            key: '3',
            month: '2024年3月',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
            COB5: 32,
            COB6: 32,
            COB7: 32,
            COB8: 32,
            COB9: 32,
            COB10: 32,
        },
        {
            key: '4',
            month: '2024年4月',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
            COB5: 32,
            COB6: 32,
            COB7: 32,
            COB8: 32,
            COB9: 32,
        },
        {
            key: '5',
            month: '2024年5月',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
            COB5: 32,
            COB6: 32,
            COB7: 32,
            COB8: 32,
        },
        {
            key: '6',
            month: '2024年6月',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
            COB5: 32,
            COB6: 32,
            COB7: 32,
        },
        {
            key: '7',
            month: '2024年7月',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
            COB5: 32,
            COB6: 32,
        },
        {
            key: '8',
            month: '2024年8月',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
            COB5: 32,
        },
        {
            key: '9',
            month: '2024年9月',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
        },
        {
            key: '10',
            month: '2024年10月',
            COB1: 32,
            COB2: 32,
            COB3: 32,
        },
        {
            key: '11',
            month: '2024年11月',
            COB1: 32,
            COB2: 32,
        },
        {
            key: '12',
            month: '2024年12月',
            COB1: 32,
        }
    ];
    const lists = [
        {
            key: '1',
            month: '2024-01',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
            COB5: 32,
            COB6: 32,
            COB7: 32,
            COB8: 32,
            COB9: 32,
            COB10: 32,
            COB11: 32,
            COB12: 32,
        },
        {
            key: '2',
            month: '2024-02',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
            COB5: 32,
            COB6: 32,
            COB7: 32,
            COB8: 32,
            COB9: 32,
            COB10: 32,
            COB11: 32,
            COB12: 32,
        },
        {
            key: '3',
            month: '2024-03',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
            COB5: 32,
            COB6: 32,
            COB7: 32,
            COB8: 32,
            COB9: 32,
            COB10: 32,
            COB11: 32,
            COB12: 32,
        },
        {
            key: '4',
            month: '2024-04',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
            COB5: 32,
            COB6: 32,
            COB7: 32,
            COB8: 32,
            COB9: 32,
            COB10: 32,
            COB11: 32,
            COB12: 32,
        },
        {
            key: '5',
            month: '2024-05',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
            COB5: 32,
            COB6: 32,
            COB7: 32,
            COB8: 32,
            COB9: 32,
            COB10: 32,
            COB11: 32,
            COB12: 32,
        },
        {
            key: '6',
            month: '2024-06',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
            COB5: 32,
            COB6: 32,
            COB7: 32,
            COB8: 32,
            COB9: 32,
            COB10: 32,
            COB11: 32,
            COB12: 32,
        },
        {
            key: '7',
            month: '2024-07',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
            COB5: 32,
            COB6: 32,
            COB7: 32,
            COB8: 32,
            COB9: 32,
            COB10: 32,
            COB11: 32,
            COB12: 32,
        },
        {
            key: '8',
            month: '2024-08',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
            COB5: 32,
            COB6: 32,
            COB7: 32,
            COB8: 32,
            COB9: 32,
            COB10: 32,
            COB11: 32,
            COB12: 32,
        },
        {
            key: '9',
            month: '2024-09',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
            COB5: 32,
            COB6: 32,
            COB7: 32,
            COB8: 32,
            COB9: 32,
            COB10: 32,
            COB11: 32,
            COB12: 32,
        },
        {
            key: '10',
            month: '2024-10',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
            COB5: 32,
            COB6: 32,
            COB7: 32,
            COB8: 32,
            COB9: 32,
            COB10: 32,
            COB11: 32,
            COB12: 32,
        },
        {
            key: '11',
            month: '2024-11',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
            COB5: 32,
            COB6: 32,
            COB7: 32,
            COB8: 32,
            COB9: 32,
            COB10: 32,
            COB11: 32,
            COB12: 32,
        },
        {
            key: '12',
            month: '2024-12',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
            COB5: 32,
            COB6: 32,
            COB7: 32,
            COB8: 32,
            COB9: 32,
            COB10: 32,
            COB11: 32,
            COB12: 32,
        },
        {
            key: '13',
            month: '2025-01',
            COB1: 32,
            COB2: 32,
            COB3: 32,
            COB4: 32,
            COB5: 32,
            COB6: 32,
            COB7: 32,
            COB8: 32,
            COB9: 32,
            COB10: 32,
            COB11: 32,
            COB12: 32,
        }
    ];
    const firstColumns = [
        {
            title: '月份',
            dataIndex: 'month',
            key: 'month'
        },
        ...Array.from({ length: 12 }, (_, index) => {
            const cobKey = `COB${index + 1}`
            return {
                title: cobKey,
                dataIndex: cobKey,
                key: cobKey,
                onCell: (record) => {
                    const cobKeyList = Object.keys(record).filter(key => key.startsWith('COB'))
                    const lastNonEmptyIndex = cobKeyList.findLastIndex(key => record[key])
                    return {
                        style: {
                            background: cobKey === cobKeyList[lastNonEmptyIndex] ? 'yellow' : 'unset'
                        }
                    }
                }
            }
        })
    ];
    const date = '2025-01'

    const secondColumns = [
        {
            title: '月份',
            dataIndex: 'month',
            key: 'month'
        },
        ...Array.from({ length: 12 }, (_, index) => {
            const cobKey = `COB${index + 1}`
            return {
                title: cobKey,
                dataIndex: cobKey,
                key: cobKey,
                onCell: (record) => {
                    const targetDate = new Date(date)
                    targetDate.setMonth(targetDate.getMonth() - index)
                    const currentDate = new Date(record.month).getTime()
                    const activeBackground = targetDate.getTime() === currentDate
                    return {
                        style: {
                            background: activeBackground ? 'yellow' : 'unset'
                        }
                    }
                }
            }
        }),
        // {
        //     title: 'COB1',
        //     dataIndex: 'COB1',
        //     key: 'COB1',
        //     onCell: (record) => {
        //         const targetDate = new Date(date).getTime()
        //         const currentDate = new Date(record.month).getTime()
        //         const activeBackground = targetDate === currentDate
        //         return {
        //             style: {
        //                 background: activeBackground ? 'yellow' : 'unset'
        //             }
        //         }
        //     }
        // },
        // {
        //     title: 'COB2',
        //     dataIndex: 'COB2',
        //     key: 'COB2',
        //     onCell: (record) => {
        //         const targetDate = new Date(date)
        //         targetDate.setMonth(targetDate.getMonth() - 1)
        //         const currentDate = new Date(record.month).getTime()
        //         const activeBackground = targetDate.getTime() === currentDate
        //         return {
        //             style: {
        //                 background: activeBackground  ? 'yellow' : 'unset'
        //             }
        //         }
        //     }
        // },
        // {
        //     title: 'COB3',
        //     dataIndex: 'COB3',
        //     key: 'COB3',
        //     onCell: (record) => {
        //         const targetDate = new Date(date)
        //         targetDate.setMonth(targetDate.getMonth() - 2)
        //         const currentDate = new Date(record.month).getTime()
        //         const activeBackground = targetDate.getTime() === currentDate
        //         return {
        //             style: {
        //                 background: activeBackground  ? 'yellow' : 'unset'
        //             }
        //         }
        //     }
        // },
        // {
        //     title: 'COB4',
        //     dataIndex: 'COB4',
        //     key: 'COB4',
        //     onCell: (record) => {
        //         const targetDate = new Date(date)
        //         targetDate.setMonth(targetDate.getMonth() - 3)
        //         const currentDate = new Date(record.month).getTime()
        //         const activeBackground = currentDate === targetDate.getTime()
        //         return {
        //             style: {
        //                 background: activeBackground  ? 'yellow' : 'unset'
        //             }
        //         }
        //     }
        // },
        // {
        //     title: 'COB5',
        //     dataIndex: 'COB5',
        //     key: 'COB5',
        //     onCell: (record) => {
        //         const targetDate = new Date(date)
        //         targetDate.setMonth(targetDate.getMonth() - 4)
        //         const currentDate = new Date(record.month).getTime()
        //         const activeBackground = currentDate === targetDate.getTime()
        //         return {
        //             style: {
        //                 background: activeBackground  ? 'yellow' : 'unset'
        //             }
        //         }
        //     }
        // },
        // {
        //     title: 'COB6',
        //     dataIndex: 'COB6',
        //     key: 'COB6',
        //     onCell: (record) => {
        //         const targetDate = new Date(date)
        //         targetDate.setMonth(targetDate.getMonth() - 5)
        //         const currentDate = new Date(record.month).getTime()
        //         const activeBackground = currentDate === targetDate.getTime()
        //         return {
        //             style: {
        //                 background: activeBackground  ? 'yellow' : 'unset'
        //             }
        //         }
        //     }
        // },
        // {
        //     title: 'COB7',
        //     dataIndex: 'COB7',
        //     key: 'COB7',
        //     onCell: (record) => {
        //         const targetDate = new Date(date)
        //         targetDate.setMonth(targetDate.getMonth() - 6)
        //         const currentDate = new Date(record.month).getTime()
        //         const activeBackground = currentDate === targetDate.getTime()
        //         return {
        //             style: {
        //                 background: activeBackground  ? 'yellow' : 'unset'
        //             }
        //         }
        //     }
        // },
        // {
        //     title: 'COB8',
        //     dataIndex: 'COB8',
        //     key: 'COB8',
        //     onCell: (record) => {
        //         const targetDate = new Date(date)
        //         targetDate.setMonth(targetDate.getMonth() - 7)
        //         const currentDate = new Date(record.month).getTime()
        //         const activeBackground = currentDate === targetDate.getTime()
        //         return {
        //             style: {
        //                 background: activeBackground  ? 'yellow' : 'unset'
        //             }
        //         }
        //     }
        // },
        // {
        //     title: 'COB9',
        //     dataIndex: 'COB9',
        //     key: 'COB9',
        //     onCell: (record) => {
        //         const targetDate = new Date(date)
        //         targetDate.setMonth(targetDate.getMonth() - 8)
        //         const currentDate = new Date(record.month).getTime()
        //         const activeBackground = currentDate === targetDate.getTime()
        //         return {
        //             style: {
        //                 background: activeBackground  ? 'yellow' : 'unset'
        //             }
        //         }
        //     }
        // },
        // {
        //     title: 'COB10',
        //     dataIndex: 'COB10',
        //     key: 'COB10',
        //     onCell: (record) => {
        //         const targetDate = new Date(date)
        //         targetDate.setMonth(targetDate.getMonth() - 9)
        //         const currentDate = new Date(record.month).getTime()
        //         const activeBackground = currentDate === targetDate.getTime()
        //         return {
        //             style: {
        //                 background: activeBackground  ? 'yellow' : 'unset'
        //             }
        //         }
        //     }
        // },
        // {
        //     title: 'COB11',
        //     dataIndex: 'COB11',
        //     key: 'COB11',
        //     onCell: (record) => {
        //         const targetDate = new Date(date)
        //         targetDate.setMonth(targetDate.getMonth() - 10)
        //         const currentDate = new Date(record.month).getTime()
        //         const activeBackground = currentDate === targetDate.getTime()
        //         return {
        //             style: {
        //                 background: activeBackground  ? 'yellow' : 'unset'
        //             }
        //         }
        //     }
        // },
        // {
        //     title: 'COB12',
        //     dataIndex: 'COB12',
        //     key: 'COB12',
        //     onCell: (record) => {
        //         const targetDate = new Date(date)
        //         targetDate.setMonth(targetDate.getMonth() - 11)
        //         const currentDate = new Date(record.month).getTime()
        //         const activeBackground = currentDate === targetDate.getTime()
        //         return {
        //             style: {
        //                 background: activeBackground  ? 'yellow' : 'unset'
        //             }
        //         }
        //     }
        // }
    ]
    return <>
        <Table columns={firstColumns} dataSource={list} pagination={false} sticky />
        <Table columns={secondColumns} dataSource={lists} pagination={false} sticky />
    </>
}

export default App;